<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异步通信</title>
    <!-- 解决闪烁问题 -->
    <style>
        [v-clock] {
            /* 没有东西的时候让他不显示 */
            display: none;
        }
    </style>
</head>

<body>

    <div id="app" v-clock>
        <input type="button" value="获取学生的信息" @click="getJoke">
        <p>{{info.name}}</p>
        <p>{{info.id}}</p>
        <p>{{info.password}}</p>
    </div>


    <!-- 这两个一定要写在脚本前边 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        // Get 请求
        //地址  https://autumnfish.cn/api/joke
        var app = new Vue({
            el: "#app",
            data() {
                return { //这个是返回 return 回来的数据
                    info: {
                        name: null,
                        id:null,
                        password:null
                    }
                }
            },

            methods: {
                getJoke: function () {
                    var that=this;// 因为this会变，所以直接把this 存为that
                    axios.get("http://localhost:5000/api/student/get").then(
                        function (response) {
                            console.log(response.data);
                            that.info=response.data
                        },
                        function (err) {}
                    )
                }
            }
        })
    </script>
</body>

</html>